import { useRequest } from "@umijs/hooks";
import { FileExcelOutlined, PlusOutlined } from "@ant-design/icons";
import Zmage from "react-zmage";
import cookie from "react-cookies";
import getImgInfo from "../../../utils/getImgInfo";
import {
  Button,
  Card,
  DatePicker,
  Form,
  Input,
  Select,
  Layout,
  Menu,
  message,
  Popconfirm,
  Radio,
  Table,
  Tag,
  Tree,
  TreeSelect,
  Upload,
} from "antd";
import { Store } from "rc-field-form/lib/interface";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { getOriginString, getSecretString } from "../../../utils/encrypt";
import { fetchRequest } from "../../../utils/Request";
import { url } from "../../../utils/url";
import XLSX from "xlsx";
import { useSingleState } from "nice-hooks";
import { any, string } from "prop-types";

import moment from "moment";
interface ValidateState {
  state: "" | "success" | "warning" | "error" | "validating" | undefined;
  help: string | undefined;
}
interface RequestParam {
  name: number;
  phone: string;
  channelName: string;
}

export default function EditChannelStaffInformation(props: any) {
  const [state, setState] = useState(props.info);

  //监听props的变化
  useEffect(() => {
    setState(props.info);
  }, [props.info]);

  //递归修改item的key
  function disableSelect(arr: any[]) {
    arr.forEach((item) => {
      delete item.disabled;
      item.key = item.deptID;
      item.value = item.deptID;
      if (
        typeof item.children === "undefined" ||
        item.children === null ||
        item.children.length === 0
      ) {
        return;
      } else {
        disableSelect(item.children);
      }
    });
  }

  const [form] = Form.useForm();

  const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 14 },
  };

  const tailLayout = {
    wrapperCol: { offset: 5, span: 14 },
  };
  const editChannelStaff = useRequest(editChannelStaffRequest, {
    manual: true,
    loadingDelay: 200,
  });
  async function editChannelStaffRequest(params: RequestParam) {
    console.log("修改");
    console.log(params);
    try {
      const json = await fetchRequest(url.EDIT_CHANNEL_STAFF, params);
      if (json.success) {
        message.success("修改成功!");
        props.onaddSuccess();
      } else {
        message.destroy();
        message.error(json.errorMsg);
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message);
    }
  }

  function onFinish(value: Store) {
    const param = {
      id: state.id,
      name: value.name,
      phone: getSecretString(value.phone),
      channelName: value.channelName,
    };

    setState({
      ...state,
      name: value.name,
      phone: getSecretString(value.phone),
      channelName: value.channelName,
    });

    console.log(param);
    editChannelStaff.run(param);
  }

  return (
    <div>
      <Form
        form={form}
        {...layout}
        onFinish={onFinish}
        initialValues={{
          name: typeof props.info.name === "undefined" ? "" : props.info.name,
          phone:
            typeof props.info.phone === "undefined"
              ? ""
              : getOriginString(props.info.phone),
          channelName:
            typeof props.info.channelName === "undefined"
              ? ""
              : props.info.channelName,
        }}
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: "必须要输入用户名" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系电话"
          name="phone"
          rules={[
            { required: true, message: "必须要输入手机号码" },
            { pattern: /^1[3456789]\d{9}$/, message: "手机号码格式错误！" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="渠道名称"
          name="channelName"
          rules={[{ required: true, message: "必须要输入渠道名称" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
